<template>
<uni-shadow-root class="partials-kefu-kefu"><cover-view class="kefuContent">
  <button open-type="contact" class="kefuItem" v-if="data.jsonData.kefuType==2">
     <cover-image class="kefuIcon" :src="data.jsonData.kefuIcon"></cover-image>
  </button>
  <button @click="calling" :data-phoneNumber="data.jsonData.kefuValue" class="kefuItem" v-if="data.jsonData.kefuType==1">
     <cover-image class="kefuIcon" :src="data.jsonData.kefuIcon"></cover-image>
  </button>
  <button @click="tolinkUrl" :data-link="data.jsonData.kefuValue" class="kefuItem" v-if="data.jsonData.kefuType==3">
     <cover-image class="kefuIcon" :src="data.jsonData.kefuIcon"></cover-image>
  </button>
  <cover-view class="kefuName" :style="'color:'+(settingData.defaultColor)">
    <cover-view>{{data.jsonData.kefuName}}</cover-view>
  </cover-view>
</cover-view></uni-shadow-root>
</template>

<script>

global['__wxRoute'] = 'partials/kefu/kefu'
const app = getApp();
Component({
  properties: {
    data: {
      type: JSON,
      value: 'default value',
    }
  },
  data: {
    someData: {},
    display:""
  },
  ready:function(){
    let that=this;
    console.log("客服数据", this.data.data)
    this.setData({
      settingData: app.globalData.setting.platformSetting
    })
    console.log('settingData', this.data.settingData)
  },
  methods: {
    calling: function (e) {
      console.log('====e===',e)
      let phoneNumber = e.currentTarget.dataset.phonenumber
      wx.makePhoneCall({
        phoneNumber: phoneNumber,
        success: function () {
          console.log("拨打电话成功！")
        },
        fail: function () {
          console.log("拨打电话失败！")
        }
      })
    },
    tolinkUrl: function (event) {
      console.log(event.currentTarget.dataset.link)
      // 缓存
      try {
        wx.setStorageSync('客服数据', event.currentTarget.dataset.url)
      } catch (e) {
      }
      this.setData({
        display: 'none'
      })
      app.globalData.linkEvent(event.currentTarget.dataset.link);
    },
  },
})
export default global['__wxComponents']['partials/kefu/kefu']
</script>
<style platform="mp-weixin">
.kefuContent{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20rpx;
}
.kefuItem{
  border-radius:20rpx;
  background: none;
  width: 90rpx;
  height: 90rpx;
  overflow: hidden;
  padding: 0;
  margin: 0
}
.kefuIcon{
  width: 80rpx;
  height: 80rpx;
}
.kefuName{
  font-size: 24rpx;
  margin-top: 6rpx
}
button::after{ border: none; }
</style>